<template>
  <div class="channel-edit">
    <van-cell title="我的频道">
      <van-button size="mini" round type="danger" plain @click="editBtnFn">{{
        isEdit ? '完成' : '编辑'
      }}</van-button>
    </van-cell>

    <!-- 我的频道列表  -->
    <van-grid :column-num="4" class="my-channel" :gutter="10" ref="mychannel">
      <van-grid-item
        class="channel-item"
        :class="{ active: active === ind }"
        v-for="(channel, ind) in myChannels"
        :key="channel.id"
        :text="channel.name"
        @click="clickChannel(channel, ind)"
      >
        <van-icon name="close" slot="icon" class="clearIcon" v-if="isEdit" />
      </van-grid-item>
    </van-grid>

    <van-cell title="所有频道" />
    <!-- 所有频道列表 -->
    <van-grid :column-num="4" :gutter="10" class="recommend-grid">
      <van-grid-item
        class="channel-item"
        v-for="channel in recommendChannels"
        :key="channel.id"
        :text="channel.name"
        @click="addChannelFn(channel)"
        icon="plus"
      />
    </van-grid>
  </div>
</template>

<script>
import {
  getAllChannelsAPI,
  addUserChannelAPI,
  deleteUserChannelAPI
} from '@/api'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'chanelEditIndex',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  components: {},
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      return this.allChannels.filter(channel => {
        const mychannel = this.myChannels.find(item => {
          return item.id === channel.id
        })
        return !mychannel
      })
    }
  },
  created () {
    this.loadAllChannels()
  },
  mounted () {},
  watch: {},
  data () {
    return {
      isEdit: false,
      allChannels: []
    }
  },
  methods: {
    ...mapMutations(['setItemFn']),
    // 加载所有频道
    async loadAllChannels () {
      try {
        const { data } = await getAllChannelsAPI()
        this.allChannels = data.data.channels
      } catch (err) {
        this.$toast('获取频道列表数据失败')
      }
    },

    // 推荐频道点击进行频道增加
    async addChannelFn (chan) {
      this.myChannels.push(chan)
      if (this.user) {
        // 已登录
        try {
          // 已登录，数据存储到线上
          await addUserChannelAPI({
            id: chan.id, // 频道 id
            seq: this.myChannels.length // 频道的 序号
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('保存失败')
        }
      } else {
        // 未登陆
        this.setItemFn(this.myChannels)
      }
    },
    // 我的频道点击频道
    clickChannel (chan, ind) {
      if (this.isEdit) {
        // 执行删除操作
        if (ind === 0) return
        if (ind <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.myChannels.splice(ind, 1)
        // 删除数据持久化
        this.deleteChannel(chan)
      } else {
        // 执行跳转操作
        this.$emit('update-active', ind, false)
      }
    },
    // 删除渠道
    async deleteChannel (channel) {
      try {
        if (this.user) {
          // 已登录，将数据存储到线上
          await deleteUserChannelAPI(channel.id)
        } else {
          // 未登录，将数据存储到本地
          this.setItemFn(this.myChannels)
        }
      } catch (err) {
        console.log(err)
        this.$toast('删除频道失败，请稍后重试')
      }
    },
    editBtnFn () {
      this.isEdit = !this.isEdit
      if (this.isEdit) {
        this.$nextTick(() => {
          const channelDiv = this.$refs.mychannel.$el
          // console.dir(channelDiv)
          const clearIcons = channelDiv.querySelectorAll('.clearIcon')
          // console.dir(clearIcons)
          clearIcons.forEach(v => {
            const pleft = v.parentNode.parentNode.parentNode.offsetLeft
            const ptop = v.parentNode.parentNode.parentNode.offsetTop
            const pwidth = v.parentNode.parentNode.parentNode.offsetWidth
            const phight = v.parentNode.parentNode.parentNode.offsetHeight
            // console.log(v)
            // console.log(v.parentNodes('channel-item ').offsetWidth)

            console.log(
              v.offsetWidth,
              v.offsetHeight,
              v.offsetLeft,
              v.offsetTop,
              pwidth,
              phight,
              pleft,
              ptop
            )
            // const top = v.offsetWidth - pwidth
            // const right = v.offsetHeight - phight
            const height = v.offsetHeight
            const width = v.offsetWidth
            console.log(phight - height, pwidth - width)
            // v.style.top = height - phight + 'px'
            //  v.style.right = -() + 'px'
            v.style.top = 0 + 'px'
            v.style.left = width + 'px'
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding-top: 80px;
  /deep/.my-channel {
    .clearIcon {
      position: absolute;
      // right: -100px;
      // top: -50px;
      font-size: 15px;
      color: rgb(241, 25, 25);
      z-index: 2;
    }
    .channel-item {
      position: relative;
      .van-grid-item__content {
        background-color: #f6f6f6;
        flex-direction: row;
        color: #222;

        .van-grid-item__text {
          font-size: 24px;
          margin-top: 0;
        }
      }
    }

    .active .van-grid-item__text {
      color: tomato !important;
    }
  }

  /deep/ .recommend-grid {
    .van-grid-item__content {
      background-color: #f6f6f6;
      flex-direction: row;
      color: #222;
      .van-icon {
        font-size: 12px;
      }

      .van-grid-item__text {
        font-size: 24px;
        margin-top: 0;
      }
    }
  }
}
</style>
